iT邦幫忙

第 11 屆 iThome 鐵人賽

0
Modern Web

試著把切版專案升級到 gulp4.0 吧系列 第 34

[試著把切版專案升級到 gulp4.0 吧] Day34 邊開發邊看畫面變動:談 gulp-plumber

  • 分享至 

  • xImage
  •  

利用 gulp 來進行前端開發、執行預先定義好的 task 時,如果過程中有例外錯誤產生,原本正在 watch 檔案的執行程式會被中止。

不過,只要使用了 gulp-plumber,錯誤訊息就只是單純顯示在 CLI 界面上,而不會直接中止整個 gulp 。

gulp-plumber

gulp-plumber 的使用方式還算直覺。只要在有可能出現錯誤訊息的 task 中,使用 .pipe(plumber()) 補上,來截獲錯誤就好

# CLI
npm install --save-dev gulp-plumber
import gulp from "gulp"
const $ = require("gulp-load-plugins")()

export function ejs() {
  return gulp
    .src(["./source/**/*.ejs", "./source/**/*.html"])
    .pipe($.plumber()) // 在一開始補上 plumber 來接獲錯誤訊息
    .pipe($.frontMatter())
    .pipe(
      $.layout(file => {
        return file.frontMatter
      })
    )
    .pipe(gulp.dest("./public"))
    .pipe($.if(!envIsPro, browserSync.stream()))
}

像在這個專案中,ejssassbabel 這些 task 都有可能噴錯,所以在一開始最好都放上 .pipe(plumber()) 來避免噴錯後整個 gulp 就停止執行了。

小結

今天是「邊開發邊看畫面變動」系列的最後一篇,談到了如何使用 gulp-plumber 套件,來避免錯誤訊息噴出時直接停止整個 gulp 程式。明天將介紹如何佈署靜態網頁到 github pages 上。

參考資料


上一篇
[試著把切版專案升級到 gulp4.0 吧] Day33 邊開發邊看畫面變動:如何一鍵預覽畫面、生成靜態檔案
下一篇
[試著把切版專案升級到 gulp4.0 吧] Day35 佈署靜態網頁到 github pages
系列文
試著把切版專案升級到 gulp4.0 吧36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言